.blocker{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
    z-index:1;
    padding:20px;
    box-sizing:border-box;
    background-color:#000;
    background-color:rgba(0,0,0,0.75);
    text-align:center
}
.blocker:before{
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
    margin-right:-0.05em
}
.blocker.behind{
    background-color:transparent
}
.modal{
    display:none;
    vertical-align:middle;
    position:relative;
    z-index:2;
    max-width:800px;
    box-sizing:border-box;
    width:90%;
    color: #fff;
    background: linear-gradient(90deg, #40bbb5 -20%, #036482 98%);
    padding:15px 30px;
    -webkit-box-shadow:0 0 20px #000;
    -moz-box-shadow:0 0 20px #000;
    -o-box-shadow:0 0 20px #000;
    -ms-box-shadow:0 0 20px #000;
    box-shadow:0 0 20px #000;
    text-align:center;
}
.modal a.close-modal{

    display:none;
    width:30px;
    height:30px;
}
.modal-spinner{
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    transform:translateY(-50%) translateX(-50%);
    padding:12px 16px;
    border-radius:5px;
    background-color:#111;
    height:20px
}
.modal-spinner>div{
    border-radius:100px;
    background-color:#fff;
    height:20px;
    width:2px;
    margin:0 1px;
    display:inline-block;
    -webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;
    animation:sk-stretchdelay 1.2s infinite ease-in-out
}
.modal-spinner .rect2{
    -webkit-animation-delay:-1.1s;
    animation-delay:-1.1s
}
.modal-spinner .rect3{
    -webkit-animation-delay:-1.0s;
    animation-delay:-1.0s
}
.modal-spinner .rect4{
    -webkit-animation-delay:-0.9s;
    animation-delay:-0.9s
}

.modal .img-container {
  background-color: #fff;
  border-radius: 9999px;
  width: 50%;
  padding-top: 10%;
  padding-bottom: 10%;
  margin: -10% auto 0 auto;
  -webkit-box-shadow: 0px 10px 54px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 10px 54px 0px rgba(0,0,0,0.4);
box-shadow: 0px 10px 54px 0px rgba(0,0,0,0.4);
}

.modal img {
  width: 50%;
}

.modal-close {
    color: #fff;
    display: block;
    margin-top: 20px;
}


@-webkit-keyframes sk-stretchdelay{
    0%,40%,100%{
        -webkit-transform:scaleY(0.5)
    }
    20%{
        -webkit-transform:scaleY(1.0)
    }
}
@keyframes sk-stretchdelay{
    0%,40%,100%{
        transform:scaleY(0.5);
        -webkit-transform:scaleY(0.5)
    }
    20%{
        transform:scaleY(1.0);
        -webkit-transform:scaleY(1.0)
    }
}